<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>排版</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./swiper.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <header class="header">
        <p class="strak">&lt;</p>
        <p class="content">我要采购</p>
        <p class="end">···</p>
    </header>
    <div class="search">
        <header class="input">
            <p>北京</p>
            <input type="text" placeholder="搜索商品名称/供应商名称">
        </header>
        <div class="imgRun">
            <div class="swiper-container swiper-container-horizontal" id="swiper-container1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide blue-slide">
                        <img src="./images/海南产地 copy.png" alt="">
                    </div>
                    <div class="swiper-slide red-slide swiper-slide-prev">
                        <img src="./images/海南产地 copy.png" alt="">
                    </div>
                    <div class="swiper-slide orange-slide swiper-slide-active">
                        <img src="./images/海南产地 copy.png" alt="">
                    </div>
                </div>
                <div class="swiper-pagination swiper-pagination-bullets">
                    <span class="swiper-pagination-bullet"></span>
                    <span class="swiper-pagination-bullet"></span>
                    <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
                </div>
            </div>
        </div>
    </div>
    <nav>
        <dl>
            <dt>
                <img src="./images/本地.png">
            </dt>
            <dd>本地</dd>
        </dl>
        <dl>
            <dt>
                <img src="./images/本地.png">
            </dt>
            <dd>本地</dd>
        </dl>
        <dl>
            <dt>
                <img src="./images/本地.png">
            </dt>
            <dd>本地</dd>
        </dl>
        <dl>
            <dt>
                <img src="./images/本地.png">
            </dt>
            <dd>本地</dd>
        </dl>
    </nav>
    <div class="wdgz">
        <header>
            <p>我的关注</p>
            <p>&nbsp;</p>
            <p><a href="">更多&nbsp;></a></p>
        </header>
        <div class="content">
            <dl>
                <dt><img src="./images/xhs.jpg" alt=""></dt>
                <dd>
                    <p>山东苹果红富士200吨起批</p>
                    <p><span>￥0.88</span>起/斤</p>
                </dd>
            </dl>
            <dl>
                <dt><img src="./images/xhs.jpg" alt=""></dt>
                <dd>
                    <p>山东苹果红富士200吨起批</p>
                    <p><span>￥0.88</span>起/斤</p>
                </dd>
            </dl>
            <dl>
                <dt><img src="./images/xhs.jpg" alt=""></dt>
                <dd>
                    <p>山东苹果红富士200吨起批</p>
                    <p><span>￥0.88</span>起/斤</p>
                </dd>
            </dl>
        </div>
    </div>
    <div class="cntent">
        <div class="top">
            <h2>全国产地</h2>
        </div>
        <div class="buttom">
            <div class="left">
                <h1>汇聚<span>4778</span>家</h1>
                <span>全国优质产地</span>
                <img src="images/中国产地 copy.png" />
            </div>
            <div class="right">
                <div class="top">
                    <img src="images/海南产地 copy.png" />
                </div>
                <div class="buttom">
                    <div class="left">
                        <img src="images/海南产地 copy.png" />
                    </div>
                    <div class="right">
                        <img src="images/海南产地 copy.png" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./swiper.js"></script>
    <script>
        ! function () {
            var mySwiper = new Swiper('.swiper-container', {
                pagination: {
                    el: '.swiper-pagination',
                },
            });
        }();
    </script>
</body>

</html>